<template>
	<!--头部搜索框-->
	<div class="index">
		<div class="header">
			<span class="logo"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/logo_1.png" @click="zhuye()"/></span>
			<div class="seach-box" @click="seachStuta==true&&seachbtn()">
				<i class="seachimg"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/icon_search@2x.png"/></i>
				<span v-show="seachshow">搜索商品</span>
				<form action="javascript:;" v-show="seachinput">
					<input type="search" name="" id="seach" value="" v-model="seachvalue" placeholder="搜索商品" @keyup.enter="seachsend" autofocus="autofocus" />
				</form>

			</div>
			<router-link :to="nt_user!=0?'/informationlist':'/login'" class="xiaoxi" v-show="!seachrmshow"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xiaoxi.png" /><span id="xmessage" v-text="xiaoxitx">1</span></router-link>
			<!--<span class="qxsousuo dasousuo" v-show="seachrmshow" @click="seachremove()">取消</span>-->
			<span class="qxsousuo dasousuo" @click="seachremoves()" v-show="seachrmshow">搜索</span>
		</div>
		<!--banner图-->
		<div class="index-content">
			<div class="swiper-container lunbotu">
				<div class="swiper-wrapper">
					<div class="swiper-slide banner" v-for="item in lunboimg">
						<a :href="item.link">
							<img :src="'http://www.ntyouxuan.com/'+item.img" />
						</a>
					</div>
				</div>
				<div class="swiper-pagination swiper-pagination1"></div>
			</div>
			
			
			<div class="n-list">
				<!--<ul>
					<a href="http://www.ntyouxuan.com/newnt/#/seachall?seachid=468&statusall=1"><li>
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/mi/m1.png"/>
						<p>休闲零食</p>
					</li></a>
					<a href="http://www.ntyouxuan.com/newnt/#/seachall?seachid=488&statusall=1"><li style="margin-left: 0.81rem;margin-right: 0.82rem;">
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/mi/m2.png"/>
						<p>新鲜水果</p>
					</li></a>
					<a href="http://www.ntyouxuan.com/newnt/#/seachall?seachid=494&statusall=1"><li style="margin-right: 0.82rem;">
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/mi/m3.png"/>
						<p>酒水茶饮</p>
					</li></a>
					<a href="http://www.ntyouxuan.com/newnt/#/seachall?seachid=520&statusall=1"><li>
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/mi/m4.png"/>
						<p>海鲜肉禽</p>
					</li></a>
				</ul>-->
				<ul class="n-list2">
					<a href="http://www.ntyouxuan.com/newnt/#/seachall?seachid=894&statusall=1"><li>
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/mi/m5.png"/>
						<p>全部商品</p>
					</li></a>
					<a href="http://www.ntyouxuan.com/newnt/#/seachall?seachid=465&cate=1&statusall=1"><li style="margin-left: 0.81rem;margin-right: 0.82rem;">
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/mi/m6.png"/>
						<p>扶贫助农</p>
					</li></a>
					<a href="http://www.ntyouxuan.com/newnt/#/money"><li style="margin-right: 0.82rem;">
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/mi/m7.png"/>
						<p>分享赚钱</p>
					</li></a>
					<a href="http://www.ntyouxuan.com/newnt/#/tsgrz"><li>
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/mi/m8.png"/>
						<p style="margin-left: -0.1rem;">特色馆入驻</p>
					</li></a>
				</ul>
			</div>
			<!--特色馆链接-->
			<!--<div class="tsghref">
				<router-link to="/characteristic"><img src="../img/tsglogo1@2x.png" /></router-link>
			</div>-->
			<div style="background-color: #fff;height: 2.24rem;"></div>
			<!--分类框-->

			<!--分类框  扶贫助农-->
			<div class="index-area-box index-area-box1">
				<!--分类title-->
				<div class="index-area-title">
					<h3>
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/biaoti2@2x.png" />
					</h3>
				</div>
				<div style="height: 0.18rem;"></div>
				<div @click="shangpin()" class="index-area-hrefimg">
					<a href="http://www.ntyouxuan.com/newnt/#/rengou">
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/wapmall/default/pic/chashu.png" />
					</a>
					<p class="n-tjbt">江西农家土特产 茶树菇</p>
					<p class="n-xtjbt"></p>
					<div class="n-jiage">
						<span style="font-size: 0.48rem;">￥31.</span><span>00</span>
						<p>立即查看</p>
					</div>
					
					
				</div>
			</div>
			<div style="height: 0rem;"></div>
			<!--分类框-->
			<div class="index-area-box">
				<!--分类title-->
				<div class="index-area-title">
					<h3>
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/biaoti@2x.png" />
					</h3>
				</div>
				<!--sweiper商品列表-->
				<div class="area-item" id="area-item2">
					<div class="swiper-wrapper">
						<div class="swiper-slide" @click="slid1()">
							<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/sanmen.png" style="width: 2.85rem;height: 1.80rem;" />
						</div>
						<div class="swiper-slide" @click="slid2()">
							<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/cangxi_03.png" style="width: 2.85rem;height: 1.80rem;" />
						</div>
						<div class="swiper-slide">
							<router-link to="/characteristic"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/chakangengduo.png" style="width: 2.85rem;height: 1.80rem;" /></router-link>
						</div>
					</div>
				</div>
				
				
				
			</div>
			
			<div style="height: 0.1rem;"></div>
			
			<!--分类框-->
			<!--<div class="index-area-box">
				<div class="index-area-title">
					<h3><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/left.png" alt="" /><span>热销好物</span><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/right.png"/></h3>
					<p>产地直发<span>·</span>优质保障</p>
				</div>
				<div class="index-area-hrefimg">
					<a href="http://www.ntyouxuan.com/newnt/#/seachall?seachid=503&cate=1&statusall=1">
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/banner2@2x.png" />
					</a>
				</div>
				<div class="area-item">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in hxscShop">
							<router-link :to="{name:'shopXQ',params:{id:item.goods_id}}">
								<img :src="'http://www.ntyouxuan.com/'+item.default_image" />
								<p v-if="userStute==1" class="yjnum"><span>佣金</span>￥{{item.commission}}</p>
								<p>{{item.goods_name}}</p>
								<span>￥{{item.price}}</span>
							</router-link>

						</div>
					</div>
				</div>
			</div>-->
			<!--分类框-->
			<!--<div class="index-area-box">-->
				<!--分类title-->
				<!--<div class="index-area-title">
					<h3><img src="../img/left@3x.png" alt="" /><span>粮油副食</span><img src="../img/right@3x.png"/></h3>
					<p>层层质检<span>·</span>营养更安心</p>
				</div>
				<div class="index-area-hrefimg">
					<a href="http://www.ntyouxuan.com/newnt/#/seachall?seachid=525&cate=1&statusall=1">
						<img v-bind:src="fenleiimg[3].img" />
					</a>
				</div>-->
				<!--sweiper商品列表-->
				<!--<div class="area-item">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in lyfsShop">
							<router-link :to="{name:'shopXQ',params:{id:item.goods_id}}">
								<img :src="'http://www.ntyouxuan.com/'+item.default_image" />
								<p v-if="userStute==1" class="yjnum"><span>佣金</span>￥{{item.commission}}</p>
								<p>{{item.goods_name}}</p>
								<span>￥{{item.price}}</span>
							</router-link>
						</div>
					</div>
				</div>-->
			<!--</div>-->
			<!--特色好物-->
			<div class="tshw">
				<div class="index-area-title" v-if="userStute==0">
					<h3>
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/zuixintuiujian.png" />
					</h3>
				</div>
				<div class="index-area-title" v-else>
					<h3>
						<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xin/zuixintuiujian.png" />
					</h3>
				</div>
				<ul class="index-rxhw-item">
					<li v-for="item in tshwShop">
						<router-link :to="{name:'shopXQ',params:{id:item.goods_id}}">
							<img :src="'http://www.ntyouxuan.com/'+item.default_image" />
							<p>{{item.goods_name}}</p>
							<p class="n-tuijianjiage">
								<span class="font-3">￥</span><span>{{item.price}}</span>
							</p>
							<p class="n-tuijianbtn">立即购买</p>
						</router-link>

					</li>
				</ul>
			</div>
			<p class="footer-tjk">——— 已经到底啦 ———</p>
		</div>
		<navfot></navfot>
		<seachrm v-if="seachrmshow" @seachitems="seachsendtow"></seachrm>
	</div>

</template>

<script>
	import navfot from '@/components/nav'
	import swcss from '../css/swiper.min.css'
	import indexcss from '../css/index.css'
	import Swiper from '../../static/swiper.min.js'
	import seachrm from '@/components/seachview/seachmodel'
	import wx from 'weixin-js-sdk'
	import tj from '../js/bdtj.js'
	
	
	var furl = 'http://www.ntyouxuan.com/'
	var newurl = 'http://api.ntyouxuan.com/'
	export default {
		name: 'Index',
		data() {
			return {
				nt_user: 0,
				seachshow: true,
				seachinput: false,
				seachStuta: true,
				kuaibaoMEG: [],
				userStute: 0,
				message_user: {},
				lunboimg: [],
				fenleiimg: [{
					'img': furl
				}, {
					'img': furl
				}, {
					'img': furl
				}, {
					'img': furl
				}],
				slsgShop: {},
				hxscShop: {},
				tshwShop: {},
				lyfsShop: {},
				tslsShop: {},
				mzbmShop: {},
				mySwiper: "",
				seachvalue: '',
				seachrmshow: false,
				wxdata:{
					'appid':'',
					'timestamp':'',
					'wxnonceStr':'',
					'wxShal':'',
					'title':'',
					'title_desc':'',
					'link':'',
					'img_url':'',
				},
				aurl:'',
				xiaoxitx:""
			}
		},
		components: {
			navfot,
			seachrm
		},
		methods: {
			isWeiXin() {
		      let ua = window.navigator.userAgent.toLowerCase();
		      //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
		      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		      return true;
		      } else {
		      return false;
		      }
		    },
			lunbo: function() {
				// 轮播图片数据
				var self = this
				$.ajax({
					url: newurl + 'wechat/cycleimg/get_wechat_index_cycleimg_list.json',
					type: 'get',
					dataType: 'json',
					success: function(res) {
						self.lunboimg = res.data;
						setTimeout(function() {
							self.mySwiper = new Swiper('.lunbotu', {
								loop: true,
								autoplay: 3000, // 自动轮播
								autoplayDisableOnInteraction: false,
								// 如果需要分页器
								pagination: '.swiper-pagination1',
								paginationType: 'custom', // 这里分页器类型必须设置为custom,即采用用户自定义配置
								// 下面方法可以生成我们自定义的分页器到页面上
								paginationCustomRender: function(swiper, current, total) {
									var customPaginationHtml = ''
									for(var i = 0; i < total; i++) {
										// 判断哪个分页器此刻应该被激活
										if(i == (current - 1)) {
											customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>'
										} else {
											customPaginationHtml += '<span class="swiper-pagination-customs"></span>'
										}
									}
									return customPaginationHtml
								}
							});
						}, 10);
					}
				})
			},
			//快报信息
			kb: function(status) {
				var self = this
				$.ajax({
					url: furl + 'index.php?app=default&act=kuaibao',
					type: 'post',
					data: {
						'dst_status': status
					},
					dataType: 'json',
					success: function(res) {
						self.kuaibaoMEG = res.retval.list_arr;
						var t = setTimeout(self.scollKb, 1000);

					},
					error: function(res) {
						
					}
				})
			},
			fenlei: function(status) {
				var self = this
				$.ajax({
					url: furl + 'index.php?app=default&act=banner_detail',
					type: 'get',
					data: {
						'dst_status': status
					},
					dataType: 'json',
					success: function(data) {
						self.fenleiimg = data.retval.categoods;
						for(var i = 0; i < self.fenleiimg.length; i++) {
							self.fenleiimg[i].img = furl + self.fenleiimg[i].img
						}
					}
				})
			},
			tuijianshop: function(num) {
				var self = this
				$.ajax({
					url: newurl + 'wechat/goods/get_wechat_index_recommend_list.json',
					type: 'get',
					data: {
					},
					dataType: 'json',
					success: function(res) {
						self.tshwShop = res.data;
						
						setTimeout(function() {
							var mySwiper1 = new Swiper('.area-item', {
								slidesPerView: 'auto',
								paginationClickable: true,
								spaceBetween: 0
							})
						}, 1000)
					}
				})
			},
			seachbtn: function() {
				var self = this
				var b = 0
				for(var i = 151; i > 20; i--) {
					(function(i) {
						var a = i
						setTimeout(function() {
							$('.seachimg img').css('margin-left', a / 100 + 'rem')
							if(i <= 21) {
								self.seachshow = false
								self.seachinput = true
								self.seachrmshow = true
								setTimeout(function() {
									document.getElementById('seach').focus()
								}, 100)
								self.seachStuta = false
							}
						}, 1 * b)
						b++
					})(i)
				}
			},
			zhuye: function() {
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/';
			},
			seachremoves: function() {
				var ses = $('#seach').val();
				if(ses == ''){
					layer.open({
						content:'请输入关键词',
						skin: 'msg',
						time: 3 //3秒后自动关闭
					});
					return false;
				}
				this.seachremove();
				var self = this;
				localStorage.setItem("nt_keyword", self.seachvalue);
				self.seachrmshow = false;
				setTimeout(function() {
					self.$router.push({
						path: '/seachall'
					});
				}, 150);
			},
			seachremove: function() {
				this.seachinput = false
				var self = this;
				self.seachrmshow = false;
				setTimeout(function() {
					self.seachshow = true
					$('.seachimg img').css('margin-left', 151 / 100 + 'rem')
					self.seachStuta = true
				}, 100)
			},
			seachsend: function() {
				var ses = $('#seach').val();
				if(ses == ''){
					layer.open({
						content:'请输入关键词',
						skin: 'msg',
						time: 3 //3秒后自动关闭
					});
					return false;
				}
				this.seachremove();
				var self = this;
				localStorage.setItem("nt_keyword", self.seachvalue);
				self.seachrmshow = false;
				setTimeout(function() {
					self.$router.push({
						path: '/seachall'
					});
				}, 150);
			},
			seachsendtow: function(data) {
				localStorage.setItem("nt_keyword", data);
				this.seachremove();
				var self = this;
				self.seachrmshow = false;
				setTimeout(function() {
					self.$router.push({
						path: '/seachall'
					});
				}, 150);
			},
			slid1:function(){
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/characteristiclist?id=4';
			},
			slid2:function(){
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/characteristiclist?id=57';
			},
			shangpin:function(){
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/rengou';
			}
		},
		created: function() {
			function getQueryString(name) { //name为传入参数
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			}
			if(getQueryString("url") !== null) {
				var url = getQueryString("url");
				location.href = furl + 'newnt/#/' + url;
			}
		},
		/*-------------------------------------------------------------------------------------*/
		mounted: function() {
			var self = this;
			window.addEventListener("scroll",this.menu);
			this.adurl=location.href;
			$.ajax({
				type:"post",
				url:furl+"index.php?app=ajax_third_login&act=wxjssdk",
				data:{'aurl':self.adurl},
				dataType:'json',
				success:function(res){
					self.wxdata.img_url="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/wapmall/default/pic/矢量智能对象.png";
	        		self.wxdata.link="http://www.ntyouxuan.com/newnt/#/";
	        		self.wxdata.title='【农淘优选】深入县域，挖掘全国优质农特产品';
	        		self.wxdata.title_desc="买优质农特产品，就上农淘优选！";
	        		
					if(res.done){
						self.wxdata.appid=res.retval.appid;
						self.wxdata.timestamp=res.retval.timestamp;
						self.wxdata.wxShal=res.retval.wxShal;
						self.wxdata.wxnonceStr=res.retval.wxnonceStr;
						if(self.isWeiXin()){
							self.wxConfig(wx,self.wxdata);
						}
						
					}
				}
			});
			/*------------微信登录---------------*/
			var user = localStorage.getItem("nt_user");
			var stute = localStorage.getItem("nt_stute");
			if(user && stute) {
				self.nt_user = user;
				self.userStute = stute;
			}
			self.fenlei(stute);
			self.kb(stute);
			self.lunbo();
			self.tuijianshop();


			$.ajax({
				type: "post",
				data:{"token":user},
				url: furl + "index.php?app=ajax&act=new_message",
				dataType: 'json',
				success: function(res) {
					self.xiaoxitx=res.retval.new_message;
					if(self.xiaoxitx == 0){
						$("#xmessage").css("display","none")
					}
					//console.log(self.xiaoxitx)
				}
			});

		},
		updated: function() {

			var oHeight = $(window).height();
			$(window).resize(function() {
				if($(window).height() < oHeight) {
					$(".footer").css("bottom", "-0.98rem");
				} else {
					$(".footer").css("bottom", "0");
				}
			});
			//		console.log(111);
		},
		activated: function() {
			this.seachremove();
			var self = this;
			//			setTimeout(function(){
			if(self.mySwiper) {
				self.mySwiper.destroy(false, true);
				self.mySwiper = new Swiper('.lunbotu', {
					loop: true,
					autoplay: 3000, // 自动轮播
					autoplayDisableOnInteraction: false,
					// 如果需要分页器
					pagination: '.swiper-pagination1',
					paginationType: 'custom', // 这里分页器类型必须设置为custom,即采用用户自定义配置
					// 下面方法可以生成我们自定义的分页器到页面上
					paginationCustomRender: function(swiper, current, total) {
						var customPaginationHtml = ''
						for(var i = 0; i < total; i++) {
							// 判断哪个分页器此刻应该被激活
							if(i == (current - 1)) {
								customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>'
							} else {
								customPaginationHtml += '<span class="swiper-pagination-customs"></span>'
							}
						}
						return customPaginationHtml
					}
				})
			}
			//			},1000);
			var oHeight = $(window).height();
			$(window).resize(function() {
				if($(window).height() < oHeight) {
					$(".footer").css("bottom", "-0.98rem");
				} else {
					$(".footer").css("bottom", "0");
				}
			});
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>